<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<title>通话记录</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/admin.css" media="all">
	<link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb">
		<!--<a lay-href="">xx管理</a>-->
		<a><cite>通话记录</cite></a>
	</div>
</div>

<div class="layui-fluid">
	<div class="layui-card">

		<div class="layui-collapse" lay-filter="component-panel">
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">搜索条件</h2>
				<div class="layui-colla-content">
					<div class="layui-form layui-card-header layuiadmin-card-header-auto">
						<div class="layui-form-item">
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">中心结点</label>
								<div class="layui-input-block">
									<input class="layui-input" name="nodeId" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">座席Id</label>
								<div class="layui-input-block">
									<input class="layui-input" name="seatId" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">记录Id</label>
								<div class="layui-input-block">
									<input class="layui-input" name="recordId" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">通道Id</label>
								<div class="layui-input-block">
									<input class="layui-input" name="channelId" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">坐席类型;1-有吖;2-群鸿</label>
								<div class="layui-input-block">
									<select name="seatType"  id="seatType" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">呼叫类型;1-普通来电;2-外呼去电;3-来电转接;4-外呼转接</label>
								<div class="layui-input-block">
									<select name="callType"  id="callType" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">客户电话</label>
								<div class="layui-input-block">
									<input class="layui-input" name="mobile" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">座席电话</label>
								<div class="layui-input-block">
									<input class="layui-input" name="seatMobile" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">呼叫时间</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" id="callTime-laydate-range" placeholder=" - ">
									<input type="hidden" name="callTimeStart">
									<input type="hidden" name="callTimeEnd">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">开始时间</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" id="beginTime-laydate-range" placeholder=" - ">
									<input type="hidden" name="beginTimeStart">
									<input type="hidden" name="beginTimeEnd">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">结束时间</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" id="endTime-laydate-range" placeholder=" - ">
									<input type="hidden" name="endTimeStart">
									<input type="hidden" name="endTimeEnd">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">通话时间</label>
								<div class="layui-input-block">
									<select name="totalTime"  id="totalTime" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">等待时长</label>
								<div class="layui-input-block">
									<select name="waitTime"  id="waitTime" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">客户Id</label>
								<div class="layui-input-block">
									<input class="layui-input" name="customerId" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">用户Id</label>
								<div class="layui-input-block">
									<input class="layui-input" name="userId" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">是否录音</label>
								<div class="layui-input-block">
									<select name="isTape"  id="isTape" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">录音名称</label>
								<div class="layui-input-block">
									<input class="layui-input" name="tapeName" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">录音地址</label>
								<div class="layui-input-block">
									<input class="layui-input" name="tapeUrl" autocomplete="off">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">坐席类型;1-未获取;2-已获取</label>
								<div class="layui-input-block">
									<select name="tapeStatus"  id="tapeStatus" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">优秀标识;1-是;2-否</label>
								<div class="layui-input-block">
									<select name="excellentFlag"  id="excellentFlag" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">是否回拨</label>
								<div class="layui-input-block">
									<select name="isBack"  id="isBack" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">通话状态;1-未接通;2-已接通;3-排队放弃;4-已留言;5-黑名单</label>
								<div class="layui-input-block">
									<select name="callStatus"  id="callStatus" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">状态;1-正常;2-停用</label>
								<div class="layui-input-block">
									<select name="status"  id="status" >
									</select>
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">创建时间</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" id="createTime-laydate-range" placeholder=" - ">
									<input type="hidden" name="createTimeStart">
									<input type="hidden" name="createTimeEnd">
								</div>
							</div>
							<div class="layui-inline layui-inline-31">
								<label class="layui-form-label">修改时间</label>
								<div class="layui-input-block">
									<input type="text" class="layui-input" id="modifyTime-laydate-range" placeholder=" - ">
									<input type="hidden" name="modifyTimeStart">
									<input type="hidden" name="modifyTimeEnd">
								</div>
							</div>
							<div class="layui-inline layui-inline-8">
								<button class="layui-btn" lay-submit lay-filter="callRecord-list-search">
									<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-card-body">
			<div style="width: 100%;overflow-x: auto;">
				<table class="layui-hide" id="callRecordListTable" lay-filter="callRecordListTable"></table>
			</div>
			<script type="text/html" id="callRecordListTable-toolbar">
				<div class="layui-btn-container">
					<shiro:hasPermission name="callRecord:add">
						<button class="layui-btn layui-btn-sm" lay-event="addRec">添加</button>
					</shiro:hasPermission>
					<shiro:hasPermission name="callRecord:del">
						<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delRec">删除</button>
					</shiro:hasPermission>
				</div>
			</script>

			<script type="text/html" id="callRecordListTable-bar">
				<shiro:hasPermission name="callRecord:edit">
					<a class="layui-btn layui-btn-xs" lay-event="editRec">编辑</a>
				</shiro:hasPermission>
				<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="showRec">查看</a>
			</script>

		</div>
	</div>
</div>
<script src="${ctxLayui}/layuiadmin/layui/layui.js"></script>
<script>
	layui.config({
		base: '${ctxLayui}/layuiadmin/'
	}).extend({
		index: 'lib/index'
	}).use(['index', 'table','dict','laydate','util'], function(){
		var $ = layui.$,table = layui.table,form = layui.form;
		var dict = layui.dict;
		var laydate = layui.laydate;
		var admin = layui.admin;
		var util = layui.util;
		dict.setSelect("seatType","seatType");
		dict.setSelect("callType","callType");
		dict.setSelect("totalTime","totalTime");
		dict.setSelect("waitTime","waitTime");
		dict.setSelect("isTape","isTape");
		dict.setSelect("tapeStatus","tapeStatus");
		dict.setSelect("excellentFlag","excellentFlag");
		dict.setSelect("isBack","isBack");
		dict.setSelect("callStatus","callStatus");
		dict.setSelect("status","status");
		laydate.render({
			elem: '#callTime-laydate-range' ,
			range: true,
			done: function(value, date, endDate){
				if(!value){
					$(".layui-form-item [name=callTimeStart]").val(null);
					$(".layui-form-item [name=callTimeEnd]").val(null);
					return;
				}
				var dateStr1= value.split(" - ")[0]
				var dateStr2= value.split(" - ")[1]
				$(".layui-form-item [name=callTimeStart]").val(dateStr1);
				$(".layui-form-item [name=callTimeEnd]").val(dateStr2);
			}
		});
		laydate.render({
			elem: '#beginTime-laydate-range' ,
			range: true,
			done: function(value, date, endDate){
				if(!value){
					$(".layui-form-item [name=beginTimeStart]").val(null);
					$(".layui-form-item [name=beginTimeEnd]").val(null);
					return;
				}
				var dateStr1= value.split(" - ")[0]
				var dateStr2= value.split(" - ")[1]
				$(".layui-form-item [name=beginTimeStart]").val(dateStr1);
				$(".layui-form-item [name=beginTimeEnd]").val(dateStr2);
			}
		});
		laydate.render({
			elem: '#endTime-laydate-range' ,
			range: true,
			done: function(value, date, endDate){
				if(!value){
					$(".layui-form-item [name=endTimeStart]").val(null);
					$(".layui-form-item [name=endTimeEnd]").val(null);
					return;
				}
				var dateStr1= value.split(" - ")[0]
				var dateStr2= value.split(" - ")[1]
				$(".layui-form-item [name=endTimeStart]").val(dateStr1);
				$(".layui-form-item [name=endTimeEnd]").val(dateStr2);
			}
		});
		laydate.render({
			elem: '#createTime-laydate-range' ,
			range: true,
			done: function(value, date, endDate){
				if(!value){
					$(".layui-form-item [name=createTimeStart]").val(null);
					$(".layui-form-item [name=createTimeEnd]").val(null);
					return;
				}
				var dateStr1= value.split(" - ")[0]
				var dateStr2= value.split(" - ")[1]
				$(".layui-form-item [name=createTimeStart]").val(dateStr1);
				$(".layui-form-item [name=createTimeEnd]").val(dateStr2);
			}
		});
		laydate.render({
			elem: '#modifyTime-laydate-range' ,
			range: true,
			done: function(value, date, endDate){
				if(!value){
					$(".layui-form-item [name=modifyTimeStart]").val(null);
					$(".layui-form-item [name=modifyTimeEnd]").val(null);
					return;
				}
				var dateStr1= value.split(" - ")[0]
				var dateStr2= value.split(" - ")[1]
				$(".layui-form-item [name=modifyTimeStart]").val(dateStr1);
				$(".layui-form-item [name=modifyTimeEnd]").val(dateStr2);
			}
		});
		var tplSeatType = function(d){
			var html = dict.showName("seatType",d.seatType);
			return html;
		};
		var tplCallType = function(d){
			var html = dict.showName("callType",d.callType);
			return html;
		};
		var tplCallTime = function(d){
			if(d.modifyTime){
				return util.toDateString(d.modifyTime);
			}
			return '';
		};
		var tplBeginTime = function(d){
			if(d.modifyTime){
				return util.toDateString(d.modifyTime);
			}
			return '';
		};
		var tplEndTime = function(d){
			if(d.modifyTime){
				return util.toDateString(d.modifyTime);
			}
			return '';
		};
		var tplTotalTime = function(d){
			var html = dict.showName("totalTime",d.totalTime);
			return html;
		};
		var tplWaitTime = function(d){
			var html = dict.showName("waitTime",d.waitTime);
			return html;
		};
		var tplIsTape = function(d){
			var html = dict.showName("isTape",d.isTape);
			return html;
		};
		var tplTapeStatus = function(d){
			var html = dict.showName("tapeStatus",d.tapeStatus);
			return html;
		};
		var tplExcellentFlag = function(d){
			var html = dict.showName("excellentFlag",d.excellentFlag);
			return html;
		};
		var tplIsBack = function(d){
			var html = dict.showName("isBack",d.isBack);
			return html;
		};
		var tplCallStatus = function(d){
			var html = dict.showName("callStatus",d.callStatus);
			return html;
		};
		var tplStatus = function(d){
			var html = dict.showName("status",d.status);
			return html;
		};
		var tplCreateTime = function(d){
			if(d.modifyTime){
				return util.toDateString(d.modifyTime);
			}
			return '';
		};
		var tplModifyTime = function(d){
			if(d.modifyTime){
				return util.toDateString(d.modifyTime);
			}
			return '';
		};

		var tableIns = table.render({
			elem:'#callRecordListTable'
			,url: ctx+'/call/callRecord/query'
			,cellMinWidth: 80
			,width:2800
			,toolbar: '#callRecordListTable-toolbar'
			,cols: [[
				{type: 'checkbox', fixed: 'left'}
				,{field:'nodeId', title: '中心结点', align: 'center',minWidth:100 }
				,{field:'seatId', title: '座席Id', align: 'center',minWidth:100 }
				,{field:'recordId', title: '记录Id', align: 'center',minWidth:100 }
				,{field:'channelId', title: '通道Id', align: 'center',minWidth:100 }
				,{field:'seatType', title: '坐席类型;1-有吖;2-群鸿', align: 'center',minWidth:100,templet:tplSeatType}
				,{field:'callType', title: '呼叫类型;1-普通来电;2-外呼去电;3-来电转接;4-外呼转接', align: 'center',minWidth:100,templet:tplCallType}
				,{field:'mobile', title: '客户电话', align: 'center',minWidth:100 }
				,{field:'seatMobile', title: '座席电话', align: 'center',minWidth:100 }
				,{field:'callTime', title: '呼叫时间', align: 'center',minWidth:100,templet:tplCallTime}
				,{field:'beginTime', title: '开始时间', align: 'center',minWidth:100,templet:tplBeginTime}
				,{field:'endTime', title: '结束时间', align: 'center',minWidth:100,templet:tplEndTime}
				,{field:'totalTime', title: '通话时间', align: 'center',minWidth:100,templet:tplTotalTime}
				,{field:'waitTime', title: '等待时长', align: 'center',minWidth:100,templet:tplWaitTime}
				,{field:'customerId', title: '客户Id', align: 'center',minWidth:100 }
				,{field:'userId', title: '用户Id', align: 'center',minWidth:100 }
				,{field:'isTape', title: '是否录音', align: 'center',minWidth:100,templet:tplIsTape}
				,{field:'tapeName', title: '录音名称', align: 'center',minWidth:100 }
				,{field:'tapeUrl', title: '录音地址', align: 'center',minWidth:100 }
				,{field:'tapeStatus', title: '坐席类型;1-未获取;2-已获取', align: 'center',minWidth:100,templet:tplTapeStatus}
				,{field:'excellentFlag', title: '优秀标识;1-是;2-否', align: 'center',minWidth:100,templet:tplExcellentFlag}
				,{field:'isBack', title: '是否回拨', align: 'center',minWidth:100,templet:tplIsBack}
				,{field:'callStatus', title: '通话状态;1-未接通;2-已接通;3-排队放弃;4-已留言;5-黑名单', align: 'center',minWidth:100,templet:tplCallStatus}
				,{field:'status', title: '状态;1-正常;2-停用', align: 'center',minWidth:100,templet:tplStatus}
				,{field:'createTime', title: '创建时间', align: 'center',minWidth:100,templet:tplCreateTime}
				,{field:'modifyTime', title: '修改时间', align: 'center',minWidth:100,templet:tplModifyTime}
				,{title:'操作', toolbar: '#callRecordListTable-bar', width:120}
			]]
			,page: true,
			limit: 10,
			limits: layui.setter.limits,
		});
		var active = {
			showRec:function (obj) {
				window.formData = null;
				layer.open({
					type: 2
					,title: '通话记录'
					,content: 'callRecordShow.jsp'
					,maxmin: true
					,area: layui.setter.area
					,btn: ['关闭']
					,success:function(layero,index){
						window.formData = obj.data;
					}
				});
			},
			addRec: function(){
				window.formData = null;
				layer.open({
					type: 2
					,title: '通话记录'
					,content: 'callRecordForm.jsp'
					,maxmin: true
					,area: layui.setter.area
					,btn: ['确定', '取消']
					,yes: function(index, layero){
						var iframeWindow = window['layui-layer-iframe'+ index]
							,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
						iframeWindow.layui.form.on('submit(layuiadmin-app-form-submit)', function(data){
							var field = data.field;
							var rtn = admin.syncReq(ctx+"/call/callRecord/add",field);
							if(rtn && rtn.code==0){
								layer.msg('操作成功');
								active.reload();
								form.render();
								layer.close(index);
							}else{
								layer.msg('操作失败');
							}
						});
						submit.trigger('click');
					}
				});
			},
			editRec:function(obj){
				var rec = obj.data;
				window.formData = null;
				layer.open({
					type: 2
					,title: '通话记录'
					,content: 'callRecordForm.jsp'
					,maxmin: true
					,area: layui.setter.area
					,btn: ['确定', '取消']
					,success:function(layero,index){
						var body = layer.getChildFrame('body', index);
						var data = obj.data;
						window.formData = data;
						$.each(data,function(item){
							body.find("[name="+item+"]").val(data[item]);
						});
					}
					,yes: function(index, layero){
						var iframeWindow = window['layui-layer-iframe'+ index]
							,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit");
						iframeWindow.layui.form.on('submit(layuiadmin-app-form-edit)', function(data){
							var field = data.field; 
							field.id = rec.id;
							var rtn = admin.syncReq(ctx+"/call/callRecord/modify",field);
							if(rtn && rtn.code==0){
								layer.msg('操作成功');
								active.reload();
								form.render();
								layer.close(index);
							}else{
								layer.msg('操作失败');
							}
						});
						submit.trigger('click');
					}
				});
			},
			delRec:function () {
				var checkStatus = table.checkStatus('callRecordListTable')
				var recs = checkStatus.data;
				if(!recs || recs.length<=0){
					layer.msg('请至少选择一条记录');
					return;
				}
				layer.confirm('确定删除'+recs.length+'条记录?', function(index){
					var idArr = [];
					for(var i=0;i<recs.length;i++){
						var rec = recs[i];
						idArr.push(rec.id);
					}
					var rtn = admin.syncReq(ctx+"/call/callRecord/deleteByBatch",{"ids":idArr.join(",")});
					if(rtn && rtn.code==0){
						layer.msg('操作成功');
						active.reload();
					}else{
						layer.msg('操作失败');
					}
				});
			},
			reload: function(){
				tableIns.reload();
			},
		};
		table.on('toolbar(callRecordListTable)', function(obj){
			var checkStatus = table.checkStatus(obj.config.id);
			switch(obj.event){
				case 'addRec':
					active.addRec()
					break;
				case 'delRec':
					active.delRec(checkStatus)
					break;
			};
		});
		table.on('tool(callRecordListTable)', function(obj){
			var data = obj.data;
			if(obj.event === 'editRec'){
				active.editRec(obj);
			}else if(obj.event === 'showRec'){
				active.showRec(obj);
			}
		});
		form.on('submit(callRecord-list-search)', function(data){
			var field = data.field;
			table.reload('callRecordListTable', {
				where: field
			});
		});
	});
</script>
</body>
</html>
